<template>
  <el-card class="box-card">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="width: 300px">
      <el-breadcrumb-item style="font-size: 16px">首页</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 16px">学校管理</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 16px"
        >分数线管理</el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="search">
      <el-form
        :inline="true"
        :model="infoForm"
        class="demo-form-inline"
        style="800px"
      >
        <el-form-item>
          <el-input
            style="width: 200px"
            placeholder="请输入院校名称"
            v-model="infoForm.collegeName"
            @blur="blur"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="infoForm.batch"
            placeholder="请选择批次"
            style="width: 120px"
            @change="changePlanFormType"
          >
            <el-option
              v-for="(item, index) in batchList"
              :label="item.value"
              :value="item.value"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="infoForm.type"
            placeholder="请选择文理科"
            style="width: 100px"
            @change="changePlanType"
          >
            <el-option
              v-for="(item, index) in typeList"
              :label="item.value"
              :value="item.value"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="searchCollege"
            style="background-color: rgba(255, 101, 0); color: #fff"
            icon="el-icon-search"
            >搜索</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-upload
            class="upload-demo"
            action="//importUScore"
            multiple
            :on-success="handleAvatarSuccess"
          >
            <el-button style="background-color: rgba(255, 101, 0); color: #fff"
              >批量导入</el-button
            >
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button @click="toggleSelection()" style="color: rgba(255, 101, 0)"
            >批量删除</el-button
          >
        </el-form-item>
      </el-form>
      <div>
        <h4 style="font-size: 16px; color: rgba(255, 0, 0)">{{ searchMsg }}</h4>
      </div>
    </div>
    <el-table
      :data="userData"
      ref="multipleTable"
      tooltip-effect="dark"
      border
      style="width: 1221px"
      :header-cell-style="headClass"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" label="全选">
      </el-table-column>
      <el-table-column label="院校名称" width="250" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="历史录取">
        <el-table-column prop="year" label="2020" width="160" align="center">
          <template slot-scope="scope">
            <el-tooltip placement="top" effect="light">
              <div slot="content" class="tips-content">
                <span><span>最低分</span></span>
              </div>
              <span>
                <span
                  style="color: rgba(236, 0, 0); font-size: 16px"
                  v-show="scope.row.score1 !== null"
                  >{{ scope.row.score1 }}</span
                >
                <span
                  style="color: rgba(236, 0, 0); font-size: 16px"
                  v-show="scope.row.score1 === null"
                >
                  --
                </span>
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="year" label="2019" width="160" align="center">
          <template slot-scope="scope">
            <el-tooltip placement="top" effect="light">
              <div slot="content" class="tips-content">
                <span><span>最低分</span></span>
              </div>
              <span>
                <span
                  style="color: rgba(236, 0, 0); font-size: 16px"
                  v-show="scope.row.score2 !== null"
                  >{{ scope.row.score2 }}</span
                >
                <span
                  style="color: rgba(236, 0, 0); font-size: 16px"
                  v-show="scope.row.score2 === null"
                >
                  --
                </span>
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="year" label="2018" width="160" align="center">
          <template slot-scope="scope">
            <el-tooltip placement="top" effect="light">
              <div slot="content" class="tips-content">
                <span><span>最低分</span></span>
              </div>
              <span>
                <span
                  style="color: rgba(236, 0, 0); font-size: 16px"
                  v-show="scope.row.score3 !== null"
                  >{{ scope.row.score3 }}</span
                >
                <span
                  style="color: rgba(236, 0, 0); font-size: 16px"
                  v-show="scope.row.score3 === null"
                >
                  --
                </span>
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="year" label="2017" width="160" align="center">
          <template slot-scope="scope">
            <el-tooltip placement="top" effect="light">
              <div slot="content" class="tips-content">
                <span><span>最低分</span></span>
              </div>
              <span>
                <span
                  style="color: rgba(236, 0, 0); font-size: 16px"
                  v-show="scope.row.score4 !== null"
                  >{{ scope.row.score4 }}</span
                >
                <span
                  style="color: rgba(236, 0, 0); font-size: 16px"
                  v-show="scope.row.score4 === null"
                >
                  --
                </span>
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="year" label="2016" width="160" align="center">
          <template slot-scope="scope">
            <el-tooltip placement="top" effect="light">
              <div slot="content" class="tips-content">
                <span><span>最低分</span></span>
              </div>
              <span>
                <span
                  style="color: rgba(236, 0, 0); font-size: 16px"
                  v-show="scope.row.score5 !== null"
                  >{{ scope.row.score5 }}</span
                >
                <span
                  style="color: rgba(236, 0, 0); font-size: 16px"
                  v-show="scope.row.score5 === null"
                >
                  --
                </span>
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-size="queryInfo.pagesize"
      layout="total, prev, pager, next"
      :total="queryInfo.count"
      background
    >
      <!--
        @current-change(页码发生改变时触发)
        :current-page(设置当前页码)
        :page-size(设置每页的数据条数)
        :total(设置总页数)
     -->
    </el-pagination>
  </el-card>
</template>

<script>
import qs from "qs";
import axios from "axios";
import upLoad from "@/public/upLoad.js";
import throttling from "@/public/throttling.js";
export default {
  data() {
    var validateName = (rule, value, callback) => {
      // 只能输入汉字
      let reg = /^[\u4e00-\u9fa5]+$/;
      if (!value) {
        return callback(new Error("院校名称不能为空!"));
      } else {
        if (!reg.test(value)) {
          console.log("输入不合法");
          callback(new Error("请输入汉字！"));
        } else if (value.search("大学") === -1) {
          callback(new Error("请输入正确的大学名称!"));
        } else {
          console.log("输入合法");
          console.log(typeof value);
          callback();
        }
      }
    };
    var validateProvince = (rule, value, callback) => {
      let reg = /^[\u4e00-\u9fa5]+$/;
      if (!value) {
        return callback(new Error("省份不能为空!"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入汉字！"));
      } else {
        callback();
      }
    };
    var validateCategory = (rule, value, callback) => {
      let reg = /^[\u4e00-\u9fa5]+$/;
      if (!value) {
        return callback(new Error("院校类型不能为空!"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入汉字！"));
      } else {
        callback();
      }
    };
    var validateType = (rule, value, callback) => {
      let reg = /^[\u4e00-\u9fa5]+$/;
      if (!value) {
        return callback(new Error("办学类型不能为空!"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入汉字！"));
      } else {
        callback();
      }
    };
    var validateTs = (rule, value, callback) => {
      if (!Number.isInteger(value) || value !== 985 || value !== 211) {
        callback(new Error("必须填985或211！"));
      } else {
        callback();
      }
    };
    return {
      // 搜索有效性验证
      searchMsg: "",
      // 多选数组
      multipleSelection: [],
      // 上传文件
      fileList: [], //excel 文件列表
      limitNum: 3, //选择文件个数
      actionUrl: "//importUScore", //上传文件url
      isShowFile: false, //文件列表是否显示 默认不显示
      formRules: {
        // 表单 校验
        password: {
          required: true,
          trigger: "blur",
          message: "请输入密码",
        },
      },

      // 当前年份
      myDate: new Date(),
      infoForm: {
        collegeName: "",
        batch: "",
        type: "",
      },
      batchList: [
        {
          value: "本科一批",
        },
        {
          value: "本科二批",
        },
        {
          value: "高职专科批",
        },
      ],
      typeList: [
        {
          value: "理科",
        },
        {
          value: "文科",
        },
      ],
      editFormRules: {
        name: [
          {
            validator: validateName,
            trigger: "blur",
          },
        ],
        province: [
          {
            validator: validateProvince,
            trigger: "blur",
          },
        ],
        category: [
          {
            validator: validateCategory,
            trigger: "blur",
          },
        ],
        type: [
          {
            validator: validateType,
            trigger: "blur",
          },
        ],
        ts: [
          {
            validator: validateTs,
            trigger: "blur",
          },
        ],
      },
      // 院校搜索
      collegeName: "",
      // 按钮显示隐藏
      showEdit: true,
      showRemove: true,
      // 控制修改院校
      editDialogVisible: false,
      // 修改用户的表单数据
      editForm: {
        fname: "",
        name: "",
        province: "",
        category: "",
        type: "",
        ts: "",
      },
      //初始分页条件
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 5,
        count: 0,
      },
      // 保存请求回来的用户列表数据
      userData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      console.log(res);
      if (res.code === 200) {
        this.$message.success(res.message);
      } else {
        this.$message.error(res.message);
      }
    },
    // 批量删除
    toggleSelection(rows) {
      let uniList = [];
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.multipleSelection.forEach((row) => {
          uniList.push(row.unvId);
        });
        console.log(uniList);
        this.$axios
          .delete("/back/universityScore", {
            data: {
              batch: this.infoForm.batch,
              type: this.infoForm.type,
              list: uniList,
            },
          })
          .then((res) => {
            this.getUniList_Token();
          });
        console.log(this.multipleSelection);
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 表格表头
    headClass() {
      //表头居中显示
      return "color:rgba(0,0,0,.8);font-weight:bold;font-size:16px;text-align:center";
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleCurrentChange(page) {
      this.queryInfo.pagenum = page;
      this.getUniList_Token();
    },
    blur() {
      if (this.infoForm.collegeName === "") {
        this.searchMsg = "";
        this.getUniList_Token();
      }
    },

    getUniList_Token() {
      const token = window.sessionStorage.getItem("tokenvalue");
      this.$axios.defaults.headers.common["satoken"] = token;
      this.$axios
        .get("/back/universityScore", {
          params: {
            name: this.infoForm.collegeName,
            type: this.infoForm.type,
            batch: this.infoForm.batch,
            page: this.queryInfo.pagenum,
            size: this.queryInfo.pagesize,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.status === 666) {
            this.$message.error("请先登录");
            this.$router.replace("/login");
          } else {
            this.userData = res.data.list;
            this.queryInfo.count = res.data.total;
          }
        });
    },
    searchCollege: throttling(function () {
      let reg = /[^\u4E00-\u9FA5]/g;
      if (this.infoForm.collegeName === "") {
        console.log(111);
        this.searchMsg = "";
      } else {
        if (reg.test(this.infoForm.collegeName)) {
          console.log(222);
          this.searchMsg = "请正确输入名称";
          return;
        } else {
          console.log(333);
          this.searchMsg = "";
          this.getUniList_Token();
        }
      }
    }, 200),
    changePlanType() {
      this.getUniList_Token();
    },
    changePlanFormType() {
      this.getUniList_Token();
    },
  },
  created() {
    this.infoForm.batch = this.batchList[0].value;
    this.infoForm.type = this.typeList[0].value;
    this.getUniList_Token();
  },
};
</script>

<style scoped>
.box-card {
  position: relative;
  margin: 22px auto;
  height: 550px;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.search {
  margin-top: 20px;
  margin-left: 20px;
}

.search /deep/ .el-input:focus {
  border: rgba(255, 101, 0);
}

.search /deep/ .el-form {
  width: 100%;
}

.el-table {
  margin-top: 20px;
}

.el-form-item {
  margin-bottom: 10px;
}

.dialog /deep/ .el-dialog {
  margin-top: 3vh;
}

.dialog /deep/ .el-dialog__body {
  padding: 0 20px;
}

.pagination {
  /* border: 1px solid red; */
  position: absolute;
  bottom: 20px;
  width: 412px;
  /* margin: 5px auto; */
  /* height: 30px; */
  left: 50%;
  margin-left: -206px;
}
</style>